<template>
  <a-modal :title="'图案详情'" :visible="true" width="1100px" :footer="null" @cancel="reset">
    <div style="text-align: right">
      <a-button v-print="'#print'" ghost type="primary">打印</a-button>
    </div>
    <div id="print">
      <a-spin :spinning="loadPattern">

        <a-card title="图案详情" :bordered="false" id="pattern">
          <div v-for="(item, index) in dataList" :key="index">
            <div id="imgs">
              <div class="left">
                <div>
                  <div style=" width: 100%;padding-bottom:10px;">
                    <img style="-webkit-touch-callout: none; pointer-events: none" v-for="(imgitem, index) in item.colors"
                      :key="`${index}`" :style="{
                        width: item.colors.length == 1 ? '500px' : item.colors.length <= 4 ? '250px' : item.colors.length <= 6 ? '150px' : item.colors.length <= 16 ? '100px' : '60px',
                        height: item.colors.length == 1 ? '500px' : item.colors.length <= 4 ? '250px' : item.colors.length <= 6 ? '150px' : item.colors.length <= 16 ? '100px' : '60px',
                        margin: '0 10px 10px 10px',
                        objectFit: 'scale-down',
                        background: '#fafafa',
                        position: 'relative',
                      }" :src="imgitem.images[0].url" onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'" />
                  </div>

                  <div id="patternText" style="line-height: 2em;">
                    <p>图案编号: {{ item.code }}</p>
                    <p>图案名称: {{ item.name }}</p>
                    <p>平面设计师:{{ item.designerUserName }}</p>
                    <p>货季: {{ item.season }}</p>
                    <p>描述: {{ item.remarks }}</p>
                    <p>含义: {{ item.meaning }}</p>
                    <p v-if="item.source == 1">来源: 原创</p>
                    <p v-if="item.source == 2">来源: 借鉴</p>
                    <p v-if="item.source == 3">来源: 出处</p>
                    <p>是否有英文: {{ item.whetherHasEnglish == 1 ? '是' : '否' }}</p>
                    <p v-if="item.whetherHasEnglish == '1'">英文原文: {{ item.englishOriginal }}</p>
                    <p v-if="item.whetherHasEnglish == '1'">英文解释: {{ item.englishExplain }}</p>
                    <p>创作过程: {{ item.creativeProcess }}</p>
                    <p>创作完成时间: {{ item.creativeCompleteDate }}</p>
                    <p>创作完成地点: {{ item.creativeCompleteLocation }}</p>
                    <p>作品首次发表时间: {{ item.firstPublishDate }}</p>
                    <p>首次发表地点: {{ item.firstPublishLocation }}</p>
                    <!-- <p>是否有敏感风险: {{ item.riskFlag == 1 ? '是' : '否' }}</p>
                    <div v-if="item.riskFlag == 1" style="display:flex">敏感风险: <div v-for="(risk, index) in item.risk"
                        :key="index" style="margin-left:5px">

                        <div v-for="(subitem, index) in riskList" :key="index">
                          <p v-if="subitem.value == risk">
                            {{ subitem.title }}
                          </p>
                        </div>
                      </div>
                    </div> -->
                    <div v-if="groupName == '外采组'">
                   <p>供应商名称: {{ detailList.supplyName }}</p>
                   <p>是否涉及特殊工艺: <span v-if="detailList.specialProcess == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.specialProcess == 1">供应商是否有专利: <span v-if="detailList.supplyHasPatent == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.supplyHasPatent == 1">供应商是否可提供专利证明文件:<span v-if="detailList.supplyHasPatentFile == 1">是</span><span v-else>否</span></p>
                   <p>面料花纹是否供应商原创: <span v-if="detailList.supplyOriginal == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.supplyOriginal == 1">供应商是否可提供原创证明文件:<span v-if="detailList.supplyOriginalProve == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.supplyOriginal == 0">供应商是否可提供授权文件:<span v-if="detailList.supplyOriginalAuthorization == 1">是</span><span v-else>否</span></p>
                   <p>花纹灵感说明:{{detailList.supplyInspiration}}</p>
                   <p>文件:</p>
                   <p v-for="item, index in detailList.moreFile" :key="index"><a :href="item" target="_blank">{{ item}}</a></p>
                </div>
                <div v-if="groupName == '设计组'">
                   <p>是否合作款: <span v-if="detailList.cooperation == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.cooperation == 1">合作文件:</p>
                  <div v-if="detailList.cooperation == 1"><p v-for="item, index in detailList.cooperationContractUrl" :key="index"><a :href="item" target="_blank">{{ item}}</a></p></div>
                   <p>是否有图案: <span v-if="detailList.patternFlag == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.patternFlag == 1">图案出处: 
                    <span v-if="detailList.patternSource == 10">原创</span>
                    <span v-if="detailList.patternSource == 20">设计灵感借鉴</span>
                    <span v-if="detailList.patternSource == 30">直接使用</span>
                    <span v-if="detailList.patternSource == 40">改动后使用</span>
                  </p>
                   <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10">图案来源:{{ detailList.patternOrigin }}</p>
                   <!-- <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10">图案来源发表方式:{{ detailList.patternOriginIssuingWay }}</p>
                   <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10">图案来源作者:{{ detailList.patternOriginAuthor }}</p> -->
                   <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10">借鉴/原始图案:</p>
                   <div v-if="detailList.patternFlag == 1 && detailList.patternSource != 10"> <p v-for="item, index in detailList.patternOriginUrl" :key="index"><a :href="item" target="_blank">{{ item}}</a></p></div>

                   <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10">是否有授权:<span v-if="detailList.patternAuthorization == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.patternFlag == 1 && detailList.patternSource !=10 && detailList.patternAuthorization == 1" >授权文件:</p>
                   <div v-if="detailList.patternFlag == 1 && detailList.patternSource != 10 && detailList.patternAuthorization == 1"> <p v-for="item, index in detailList.patternAuthorizationUrl" :key="index"><a :href="item" target="_blank">{{ item}}</a></p></div>
                   <p v-if="detailList.patternFlag == 1">设计灵感说明:{{ detailList.patternInspiration }}</p>
                   <p>是否有文字: <span v-if="detailList.wordage == 1">是</span><span v-else>否</span></p>
                   <p v-if="detailList.wordage == 1">语言类型: 
                    <span v-if="detailList.languageType == 10">中文</span>
                    <span v-if="detailList.languageType == 20">英文</span>
                    <span v-if="detailList.languageType == 30">法文</span>
                    <span v-if="detailList.languageType == 40">意大利文</span>
                    <span v-if="detailList.languageType == 50">其他</span>
                  </p>
                  <p v-if="detailList.wordage == 1">字体出处: 
                    <span v-if="detailList.typefaceSource == 10">原创</span>
                    <span v-if="detailList.typefaceSource == 20">直接使用</span>
                    <span v-if="detailList.typefaceSource == 30">直接使用</span>
                  </p>
                  <p v-if="detailList.wordage == 1 && detailList.typefaceSource != 10">字体类型:{{ detailList.typefaceType }}</p>
                  <p v-if="detailList.wordage == 1 && detailList.typefaceSource !=10 ">字体原始图:</p>
                  <div v-if="detailList.wordage == 1 && detailList.typefaceSource != 10">   <p v-for="item, index in detailList.typefaceOriginUrl" :key="index"><a :href="item" target="_blank">{{ item}}</a></p></div>
                  <p v-if="detailList.wordage == 1 && detailList.typefaceSource != 10">来源: 
                    <span v-if="detailList.typefaceOrigin == 10">免费字体</span>
                    <span v-if="detailList.typefaceOrigin == 20">授权使用</span>
                    <span v-if="detailList.typefaceOrigin == 30">授权使用</span>
                  </p>
                  <p v-if="detailList.wordage == 1 && detailList.typefaceOrigin ==20 ">字体来源文件:</p>
                  <div v-if="detailList.wordage == 1 && detailList.typefaceOrigin == 20"><p v-for="item, index in detailList.typefaceOriginProveUrl" :key="index"><a :href="item" target="_blank">{{ item}}</a></p></div>

                  <p v-if="detailList.wordage == 1 && detailList.typefaceOrigin ==30 ">字体来源其他说明:{{ detailList.typefaceOriginRestsExplain }}</p>
                  <p v-if="detailList.wordage == 1">文字含义:{{ detailList.typefaceMeaning }}</p>

                </div>
                  </div>
                </div>

              </div>
              <div class="right">
                <a-list item-layout="horizontal" :data-source="item.elements">
                  <a-list-item slot="renderItem" slot-scope="elementItem" class="item" :style="{
                    width: item.elements.length > 6 ? '50%' : '100%'
                  }">
                    <div style="width:45%;height:120px;background:#fff;padding:5px 0;">
                      <img :src="elementItem.url ? elementItem.url : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                        :alt="elementItem.id" />
                    </div>
                    <div class="content">
                      <p>元素名称: {{ elementItem.name }}</p>
                      <p>描述: {{ elementItem.description }}</p>
                    </div>
                  </a-list-item>
                </a-list>
              </div>
            </div>
            <div>
              <div style="width:100%;margin:auto">
                <div id="skc">
                  <p>关联SKC<span style="color: #f44336;font-size: 12px;">红色字体为该款已下架</span></p>
                  <div v-if="!showSkc" style="text-align:center;margin:20px">
                    暂无关联的SKC
                  </div>
                  <div id="table">
                    <a-table bordered size="small" :columns="columns" :data-source="skcList" :pagination="false"
                      row-key="record => record._id" :row-class-name="record => record.unSale == '是' ? 'table-color' : ''"
                      :scroll="{ x: true }">
                      <span slot="style" slot-scope="txt, record">
                        {{ record.style }}{{ record.colorCode }}
                      </span>
                      <span slot="sampleCode" slot-scope="txt, record">
                        {{ record.sampleCode }}{{ record.colorCode }}
                      </span>
                      <template slot="image" slot-scope="txt, record">

                        <div style="display:flex;height:90px">
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/' + code + '/' + 'skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'" :alt="record.skcCode"
                            style="cursor:pointer;width: 48%;objectFit: scale-down"
                            @click="prevImg('https://bzhz.jnbygroup.com/jnbyimages/' + code + '/skc/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png', 'https://bzhz.jnbygroup.com/jnbyimages/back/' + code + '/skc/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png', 0)" />
                          <img
                            :src="'https://bzhz.jnbygroup.com/jnbyimages/back/' + code + '/' + 'skc/thumbs/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png'"
                            onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'" :alt="record.skcCode"
                            style="cursor:pointer;margin-left:10px;width: 48%;objectFit: scale-down"
                            @click="prevImg('https://bzhz.jnbygroup.com/jnbyimages/' + code + '/skc/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png', 'https://bzhz.jnbygroup.com/jnbyimages/back/' + code + '/skc/' + record.skcCode.replace('-ZJ', '').replace('-G', '') + '.png', 1)" />
                        </div>

                      </template>
                      <template slot="two" slot-scope="txt, record">
                        {{ record.inQty - record.saleQty }}
                      </template>
                    </a-table>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </a-card>
      </a-spin>
      <a-spin :spinning="loadingPatent">
        <a-card title="著作权详情" :bordered="false">
          <a-row>
            <a-col :span="8">
              著作权名称：{{ patentList.name }}
            </a-col>
            <a-col :span="8">
              著作权编号：{{ patentList.code }}
            </a-col>
            <a-col :span="8">
              有效时间：{{ patentList.takeEffectDate }} - {{ patentList.invalidDate }}
            </a-col>
          </a-row>
          <a-row>
            <div style=" width: 100%;margin-top:20px;padding-bottom:10px;display: flex;justify-content: space-between;">
              <img style="-webkit-touch-callout: none; pointer-events: none"
                v-for="(imgitem, index) in patentList.certificateUrlList" :key="`${index}`" :style="{
                  width: patentList.certificateUrlList.length == 1 ? '500px' : patentList.certificateUrlList.length <= 4 ? '270px' : patentList.certificateUrlList.length <= 6 ? '260px' : patentList.certificateUrlList.length <= 16 ? '100px' : '60px',
                  height: patentList.certificateUrlList.length == 1 ? '500px' : patentList.certificateUrlList.length <= 4 ? '270px' : patentList.certificateUrlList.length <= 6 ? '260px' : patentList.certificateUrlList.length <= 16 ? '100px' : '60px',
                  margin: '0 10px 10px 10px',
                  objectFit: 'scale-down',
                  background: '#fafafa',
                  position: 'relative',
                }" :src="imgitem" onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'" />
            </div>
          </a-row>
        </a-card>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import {
  queryExtendInfo
} from '@api/pattern/index.js'
const columns = [
  {
    title: '图片',
    width: '30%',
    scopedSlots: { customRender: 'image' }
  },
  {
    title: '款色号',
    width: 140,
    scopedSlots: { customRender: 'style' }
  },
  {
    title: '波段',
    width: 60,
    dataIndex: 'band'
  },
  {
    title: '样衣色号',
    width: 110,
    scopedSlots: { customRender: 'sampleCode' }
  },
  {
    title: '入库',
    dataIndex: 'inQty'
  },
  {
    title: '零售',
    dataIndex: 'saleQty'
  },
  {
    title: '库存',
    scopedSlots: { customRender: 'two' }
  }
]
export default {
  props: {
    patternCode: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      columns,
      patt: 'api/gateway/imagemanage-center/',
      dataList: [],
      patentList: {},
      bandList: [],
      skcList: [],
      groupName:'',
      patternId:'',
      detailList:[],
      code: '',
      loadingPatent: false,
      loadPattern: false,
      showSkc: false
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.loadData()
    this.loadPatent()
    this.getAuth()
    this.getExtendDetail()
  },
  methods: {
    reset() {
      this.dataList = []
      this.patentList = {}
      this.$emit('close')
    },
    getAuth() {
      try {
        postAction(`/imagemanage-center/account/list`, { jobNumber: this.jobNumber }).then(data => {
          if (data.code == 200) {
            this.groupName = data.data.records[0].groupName
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
      finally {
        this.loading = false

      }
    },
    async getExtendDetail(patternId) {
      const res = await queryExtendInfo('pattern', { patternId })
      if (res.code == 200) {
        this.detailList = res.data
        if (this.detailList.moreFile || this.detailList.moreFile == '') {
          this.detailList.moreFile = this.detailList.moreFile.split(',')
          this.detailList.cooperationContractUrl = this.detailList.cooperationContractUrl.split(',')
          this.detailList.patternOriginUrl = this.detailList.patternOriginUrl.split(',')
          this.detailList.patternAuthorizationUrl = this.detailList.patternAuthorizationUrl.split(',')
          this.detailList.typefaceOriginUrl = this.detailList.typefaceOriginUrl.split(',')
          this.detailList.typefaceOriginProveUrl = this.detailList.typefaceOriginProveUrl.split(',')
        }
       
      } else {
        this.$message.error('查找图案扩展信息失败')
      }
    },
    loadPatent() {
      this.loadingPatent = true
      const data = {}
      if (this.patternCode) {
        data.patternCode = this.patternCode
        // data.patternCode = 'H23AW003'
      }
      try {
        postAction(`${this.patt}patent/info`, data).then(res => {
          if (res.code == 200) {
            this.patentList = res.data
          } else {
            this.$message.warning(res.msg)
          }
          this.loadingPatent = false
        })
      } catch (error) {
        this.loadingPatent = false
      }
    },
    loadData() {
      this.loadPattern = true
      const data = {
        jobNumber: this.jobNumber
      }
      if (this.patternCode) {
        data.patternCode = this.patternCode
        // data.patternCode = 'H23AW011'
      }
      try {
        postAction(`${this.patt}pattern/examine/list/print`, data).then(res => {
          if (res.code == 200) {
            if (!res.data.length) {
              this.$message.warning('无数据')
            } else {
              res.data.map((item, index) => {
                // if (index < 2) {
                if (item.brandCode === '速写') {
                  this.code = 'CROQUIS'
                } else if (item.brandCode === 'A PERSONAL NOTE 73') {
                  this.code = 'APN 73'
                } else if (item.brandCode === 'jnby by JNBY') {
                  this.code = '童装'
                } else if (item.brandCode === 'Pomme de terre') {
                  this.code = '蓬马'
                } else if (item.brandCode === 'jnby for mini') {
                  this.code = '婴童'
                } else {
                  this.code = item.brandCode
                }
                this.dataList.push(item)
                
                // }
              })
              if (res.data[0].relationSkc.length) {
                this.showSkc = true
                this.skcList = res.data[0].relationSkc
              } else {
                this.showSkc = false
              }
              this.patternId = res.data[0].id
              this.$nextTick(()=>{
                this.getExtendDetail(this.patternId)
              })
            }
          } else {
            this.$message.warning(res.msg)
          }
          this.loadPattern = false
        })
      } catch (error) {
        this.loadPattern = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
@media print {
  body {
    height: auto;
  }

  @page {
    /* 设置每页顶部、底部间距 { */
    margin: 10px 0;
    size: landscape
  }

}

#imgs {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  page-break-after: always;
}

#imgs .left {
  width: 59%;
}

#imgs .right {
  width: 41%;
  display: flex;
  flex-direction: column;
}

#imgs .left .imgList {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.ant-list-items {
  display: flex;
  flex-wrap: wrap;
}

#imgs .right .item {
  margin-bottom: 10px;
}

#imgs .right .item .content {
  width: 55%;
  padding-left: 10px;
}

#imgs .right .item .content p {
  font-weight: 500;
  word-break: break-all;
}

#imgs .right img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

#patternText {
  margin: 0 10px;
}

#skc {
  border-bottom: 10px solid #fff;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
  width: 100%;
  margin: auto;
  page-break-after: always;

}

#skc p {
  text-align: center;
  font-size: 21px;
  margin: 5px auto;
}

#skc .skcImgs img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
</style>
